<template>
	<common-card class="portal_course_schedule">
		<div class="filter">
			<div class="label">周：</div>
			<a-tabs position="top" scrollPosition="auto" type="card" v-model:activeKey="currentWeek">
				<a-tab-pane v-for="tab in weekTabs" :key="tab.key" :title="tab.title" />
			</a-tabs>
		</div>
		<div class="filter">
			<div class="label">日：</div>
			<a-radio-group v-model="currentDate">
				<a-radio value="0">全部</a-radio>
				<a-radio value="1">周一</a-radio>
				<a-radio value="2">周二</a-radio>
				<a-radio value="3">周三</a-radio>
				<a-radio value="4">周四</a-radio>
				<a-radio value="5">周五</a-radio>
				<a-radio value="6">周六</a-radio>
				<a-radio value="7">周日</a-radio>
			</a-radio-group>
		</div>
		<div class="filter">
			<div class="label">节次：</div>
			<div class="body">
				<a-radio-group v-model="currentNode">
					<a-radio value="0">全部</a-radio>
					<a-radio value="1">1-2</a-radio>
					<a-radio value="2">3-4</a-radio>
					<a-radio value="3">5-6</a-radio>
					<a-radio value="4">7-8</a-radio>
				</a-radio-group>
				<a-space @click="handleSelectInput">
					<a-input v-model="startNode" placeholder="起始节次" />
					至
					<a-input v-model="endNode" placeholder="截至节次" />
					<a-button type="primary" @click="handleQueryNode">确定</a-button>
				</a-space>
			</div>
		</div>
		<a-table v-bind="tableConfig" :data="tableListData">
			<template #operate="{ record }">
				<a-button type="text" @click="$modal.info({ title: 'Name', content: record.name })">回放</a-button>
			</template>
		</a-table>
		<a-pagination size="small" :total="tableData.length" v-model:current="pageCurrent" v-model:pageSize="pageSize" />
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
import { getCurrWeek, getYearWeeks } from '@/utils/dayjsPlugin';
defineOptions({ name: 'CourseSchedule' });
interface TableProp {
	week: string;
	node: string;
	course: string;
	address: string;
	status: number;
}
const tableConfig = ref({
	bordered: false,
	pagination: false,
	pagePosition: 'bottom',
	scroll: { maxHeight: 245 },
	columns: [
		{ title: '星期', dataIndex: 'week', minWidth: 70, align: 'center' },
		{ title: '节次', dataIndex: 'node', minWidth: 70, align: 'center' },
		{ title: '课程', dataIndex: 'course', minWidth: 200 },
		{ title: '地点', dataIndex: 'address', minWidth: 160 },
		{ title: '操作', slotName: 'operate', width: 60, align: 'center' }
	]
});
const tableData = reactive<TableProp[]>([
	{ week: '周一', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周一', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周一', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周一', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周二', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周二', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周二', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周二', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周三', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周三', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周三', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周三', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周四', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周四', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周四', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周四', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周五', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周五', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周五', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周五', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周六', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周六', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周六', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周六', node: '7-8', course: '计算机科学', address: 'A104', status: 1 },
	{ week: '周日', node: '1-2', course: '高等数学', address: 'A101', status: 1 },
	{ week: '周日', node: '3-4', course: '线性代数', address: 'A102', status: 1 },
	{ week: '周日', node: '5-6', course: '大学英语', address: 'A103', status: 1 },
	{ week: '周日', node: '7-8', course: '计算机科学', address: 'A104', status: 1 }
]);
const tableListData = computed(() => {
	let page = pageCurrent.value;
	let limit = pageSize.value;
	return tableData.slice((page - 1) * limit, page * limit);
});
const weekTabs = computed(() => {
	let weekData = getYearWeeks(2025);
	return weekData.map((n) => {
		return { key: n.week, title: `第${n.week}周 ${n.start}-${n.end}` };
	});
});
const currentWeek = ref(0);
const currentDate = ref('0');
const currentNode = ref('0');
const startNode = ref('');
const endNode = ref('');
const pageSize = ref(6);
const pageCurrent = ref(1);
const handleSelectInput = () => {
	currentNode.value = '';
};
const handleQueryNode = () => {
	if (!currentNode.value) {
		this.$message.warning('请输入起始节次');
		return false;
	}
	if (!endNode.value) {
		this.$message.warning('请输入结束节次');
		return false;
	}
	handleQueryTableData();
};
const handleQueryTableData = () => {
	let params = { week: currentWeek.value, node: currentNode.value };
	params['page'] = pageCurrent.value;
	params['limit'] = pageSize.value;
	if (!currentNode.value) {
		params['startNode'] = startNode.value;
		params['endNode'] = endNode.value;
	} else {
		params['startNode'] = '';
		params['endNode'] = '';
	}
};
const handleWeekChange = (val: number) => {
	currentWeek.value = val;
};
watch(currentNode, (val: string) => {
	if (!val) return false;
	startNode.value = '';
	endNode.value = '';
});
onMounted(() => {
	currentWeek.value = getCurrWeek(2025);
});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.portal_course_schedule {
	&:deep(.arco-card-body) {
		gap: 10px;
		flex-direction: column;
		padding-top: 12px !important;
	}
	.filter {
		display: flex;
		align-items: center;
		padding: 0 10px;
		min-height: 30px;
		flex-shrink: 0;
	}
	.label {
		width: 42px;
		flex-shrink: 0;
		font-weight: 700;
		user-select: none;
	}
	.body {
		display: flex;
		align-items: center;
		overflow: hidden;
		flex: 1;
		.arco-space {
			margin-left: 10px;
		}
		.arco-btn {
			height: 30px;
		}
		&:deep(.arco-input) {
			text-align: center;
			line-height: 1.385;
		}
		.arco-input-wrapper {
			width: 80px;
		}
	}
	&:deep(.arco-tabs) {
		flex: 1;
		height: 30px;
		.arco-tabs-nav {
			gap: 6px;
			height: 100%;
		}
		.arco-tabs-nav-extra {
			display: none;
		}
		.arco-tabs-nav-button {
			margin: 0;
			width: 20px;
			flex-shrink: 0;
			height: inherit;
			line-height: 30px;
			text-align: center;
			background-color: var(--color-border-3);
			&:hover {
				background-color: var(--color-fill-2);
			}
		}
		.arco-tabs-nav-tab-list {
			display: flex;
			gap: 8px;
		}
		.arco-tabs-tab {
			padding: 7px;
			line-height: 1;
			border-radius: 4px;
			box-sizing: border-box;
			border-right: 1px solid var(--color-neutral-3);
			&.arco-tabs-tab-active {
				border-color: rgb(var(--primary-6));
			}
		}
	}
	&:deep(.arco-tabs-nav):before {
		content: none;
	}
	&:deep(.arco-tabs-content) {
		display: none;
	}
	.arco-radio-group {
		display: flex;
		overflow: hidden;
		height: 30px;
		gap: 8px;
		.arco-radio {
			margin: 0;
			padding: 0 9px;
			user-select: none;
			border-radius: 4px;
			border: solid 1px var(--color-border-3);
			&.arco-radio-checked {
				border-color: rgb(var(--primary-6));
				&:deep(.arco-radio-label) {
					color: rgb(var(--primary-6));
				}
			}
		}
		&:deep(.arco-icon-hover) {
			display: none;
		}
		&:deep(.arco-radio-label) {
			margin: 0;
		}
	}
	.arco-table {
		flex: 1;
		min-height: 255px;
		overflow: hidden;
		border-top: solid 1px var(--color-border-table);
		.arco-btn {
			padding: 0;
			height: 22px;
			border: none;
		}
	}
	.arco-pagination {
		padding: 0 12px 12px;
		justify-content: center;
	}
}
</style>
